import "./index.scss";
import { Card, Form, Input, Button, Dropdown, Space, message } from "antd";
import { DownOutlined, SmileOutlined } from "@ant-design/icons";
// import { Dropdown,  } from "antd";
import logo from "../../assets/logo2.png";
import { useNavigate } from "react-router-dom";
// 从中间件中导入触发状态更新的钩子函数
import { useDispatch } from "react-redux";
import { fetchLogin } from "../../store/modules/user";
// 引入usestate
import { useState } from "react";
// import axios from 'axios'
const Login = () => {
  // 实例化钩子函数不能写在函数里面
  const dispatch = useDispatch();
  const navigate = useNavigate();
  // 点击登录
  const onFinish = async (values) => {
    var raw = {
      username: `${values.username}`,
      password: `${values.password}`,
      role: `${indexKey}`,
    };
    console.log(raw, "raw");
    // 触发异步action函数fetxhLogin
    // await dispatch(fetchLogin(raw));
    localStorage.setItem("role", indexKey);
    localStorage.setItem("token", values.username);
    navigate("/");
    message.success("登录成功");
  };
  // 下拉的属性定义

  const [selectedKeys, setSelectedKeys] = useState("选择登录身份");
  const [indexKey, setIndexKey] = useState("");
  const onClick = ({ key }) => {
    // message.info(`Click on item ${items[key].label}!`);
    setSelectedKeys(key == 0 ? "团委老师" : "校团委");
    setIndexKey(key);
  };
  const items = [
    {
      label: "团委老师",
      key: "0",
    },
    {
      label: "校团委",
      key: "1",
    },
  ];
  return (
    <div className='login'>
      <Card className='login-container'>
        <img className='login-logo' src={logo} alt='' />
        <Form validateTrigger='onBlur' onFinish={onFinish}>
          <Form.Item
            name='username'
            rules={[
              {
                required: true,
                message: "请输入管理员账号",
              },
              {
                // pattern: /^1[3456789]\d{9}$/,
                message: "请输入管理员账号!",
              },
            ]}
          >
            <Input size='large' placeholder='请输入管理员账号' />
          </Form.Item>
          <Form.Item
            name='password'
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
              {
                // pattern: /^[0-9]{6}$/,
                message: "请输入密码!",
              },
            ]}
          >
            <Input size='large' placeholder='请输入密码' />
          </Form.Item>
          <Form.Item>
            <Dropdown
              menu={{
                items,
                onClick,
              }}
            >
              <a onClick={(e) => e.preventDefault()}>
                <Space>
                  {selectedKeys}
                  <DownOutlined />
                </Space>
              </a>
            </Dropdown>
          </Form.Item>
          <Form.Item>
            <Button type='primary' htmlType='sumit' size='large' block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};
export default Login;
